import React, {useEffect, useState} from "react";

import {createStyles} from "antd-style"
import SystemInfoApi, {NetworkIf} from "@/api/web/SystemInfoApi.ts";
import {Collapse} from "antd";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            width: 100%;

            .title {
                display: block;
                text-align: center;
                margin: 10px auto;
                font-size: 18px;
                font-weight: 600;
            }
        `,
        contentHeader: css`
            font-size: 17px;
        `,
        contentBody: css`
            p {
                display: flex;
                text-align: left;
                span {
                    margin-left: auto;
                }
            }
        `,
    }
})

const NetworkInfoCard: React.FC = () => {
    const styles = useStyles().styles
    const [networkIfList, setNetworkIfList] = useState<NetworkIf[]>([])

    useEffect(() => {
        SystemInfoApi.getNetworkIF().then(res => {
            setNetworkIfList(res.data)
        })
    }, []);

    return (
        <div className={styles.container}>
            <h3 className="title">网卡信息</h3>
            <Collapse
                ghost
                items={networkIfList.map(item => ({
                    key: item.name,
                    label: item.displayName,
                    classNames: {
                        header: styles.contentHeader,
                        body: styles.contentBody,
                    },
                    children: <>
                        <p>名称<span>{item.displayName}</span></p>
                        <p>接口名称<span>{item.name}</span></p>
                        <p>接口别名<span>{item.ifAlias}</span></p>
                        <p>MAC地址<span>{item.macaddr}</span></p>
                        <p>最大传输单元<span>{item.mtu}</span></p>
                        <p>连接速度<span>{item.speed / 1000 / 1000}mbps</span></p>
                        <p>NDIS物理介质类型<span>{item.ndisPhysicalMediumType}</span></p>
                        <p>操作状态<span>{item.ifOperStatus}</span></p>
                        <p>已经接受的数据<span>{(item.bytesRecv / 1024 / 1024).toFixed(2)}MB</span></p>
                        <p>已经发送的数据<span>{(item.bytesSent / 1024 / 1024).toFixed(2)}MB</span></p>
                        <p>IPV4地址{item.ipv4addr.map(item => <span key={item}>{item}</span>)}</p>
                        <p>IPV6地址{item.ipv6addr.map(item => <span key={item}>{item}</span>)}</p>
                    </>
                }))}
                />
        </div>
    )
}

export default NetworkInfoCard
